<template>
  <Layout>
    <SliderContent
      :slider-title="$t('ProductCategories')"
      :content-nav="$t('Message') + ' > '"
      :hideSlider="true"
    >
      <template #content>
        <a-form
          ref="formRef"
          :model="formState"
          name="messageForm"
          :rules="rules"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          @finish="onFinish"
          class="message-form"
          v-if="showForm"
        >
          <a-form-item :label="$t('MessageSubject')" name="form0">
            <a-input
              v-model:value="formState.form0"
              :placeholder="$t('InputMessageSubject')"
            />
          </a-form-item>

          <a-form-item :label="$t('MessageContent')" name="form1">
            <a-input
              v-model:value="formState.form1"
              :placeholder="$t('InputMessageContent')"
            />
          </a-form-item>

          <a-form-item :label="$t('CustomerName')" name="form2">
            <a-input
              v-model:value="formState.form2"
              :placeholder="$t('InputCustomerName')"
            />
          </a-form-item>

          <a-form-item :label="$t('Contact')" name="form3">
            <a-input
              v-model:value="formState.form3"
              :placeholder="$t('InputContact')"
            />
          </a-form-item>

          <a-form-item :label="$t('ContactNumber')" name="form4">
            <a-input
              v-model:value="formState.form4"
              :placeholder="$t('InputContactNumber')"
            />
          </a-form-item>

          <a-form-item label="QQ" name="form5">
            <a-input
              v-model:value="formState.form5"
              :placeholder="$t('InputQQNumber')"
            />
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 6, span: 12 }">
            <a-button
              class="submit-btn"
              style="width: 100%"
              type="primary"
              html-type="submit"
            >
              {{ $t("Submit") }}
            </a-button>
          </a-form-item>
        </a-form>
      </template>
    </SliderContent>
  </Layout>
</template>

<script setup>
import { nextTick, ref, watch } from "vue";
import Layout from "@/components/Layout.vue";
import SliderContent from "@/components/SliderContent.vue";
import { submitMessage } from "../../src/api/message";
import { message } from "ant-design-vue";
import { useI18n } from "vue-i18n";
import { computed } from "vue";

const { t, locale } = useI18n();

const formRef = ref();
const _rules = {
  form0: [
    {
      required: true,
      message: "RequiredMessage",
      trigger: "change",
    },
  ],
  form1: [
    {
      required: true,
      message: "RequiredMessage",
      trigger: "change",
    },
  ],
  form2: [
    {
      required: true,
      message: "RequiredMessage",
      trigger: "change",
    },
  ],
  form3: [
    {
      required: true,
      message: "RequiredMessage",
      trigger: "change",
    },
  ],
  form4: [
    {
      required: true,
      message: "RequiredMessage",
      trigger: "change",
    },
  ],
};

const formState = ref({
  form0: "",
  form1: "",
  form2: "",
  form3: "",
  form4: "",
  form5: "",
});

const loading = ref(false);
const showForm = ref(true);

watch(locale, (newValue) => {
  showForm.value = false
  nextTick(() => { 
    showForm.value = true
  })
})

const rules = computed(() => {
  const result = {};
  console.log("转换", locale.value);
  Object.keys(_rules).forEach((key) => {
    result[key] = _rules[key].map((item) => {
      item.message = t(item.message);
      return item;
    });
  });

  return result;
});

const onFinish = (formData) => {
  if (loading.value) return;
  loading.value = true;
  const hide = message.loading("提交中...");
  submitMessage(formData)
    .then((res) => {
      hide();
      message.success("提交成功");
      formRef.value.resetFields();
    })
    .catch((res) => {
      hide();
      message.error(res.msg || res.message || "提交失败，请重试");
    })
    .finally(() => {
      loading.value = false;
    });
};
</script>

<style lang="less">
.message-form {
  .ant-input {
    height: 20px;
    line-height: 20px;
    background-color: #f5f6fa;
    border-color: #e5e5e5;
    border-radius: 1px;
  }
}

.submit-btn {
  background: linear-gradient(135deg, #03b764 0%, #03b764 3%, #0490ac 100%);
  height: 20px;
  border-radius: 1px;
}
</style>
